<template>
    <div>
        <h1>test1-笔试题</h1>

        <h4>1、插值表达式{{ }}中如何使用三元运算符和普通函数，分别对应写出案例</h4>
        <div class="group">
            <div class="item">
                <div class="title">三元运算符:</div>
                <div class="content">
                    <div>{{ 1 > 2 ? '大于' : '小于' }}</div>
                </div>
            </div>
            <div class="item">
                <div class="title">普通函数:</div>
                <div class="content">
                    <div>{{ getText() }}</div>
                </div>
            </div>
        </div>

        <h4>如何给标签添加事件，如果绑定的事件需要传递参数又该如何</h4>
        <div class="group">
            <div class="item">
                <div class="title">给标签添加事件，事件传参</div>
                <div class="content">
                    <p>num:{{ num }}</p>
                    <button @click="changeNum"></button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue';

const getText = () => {
    return '普通函数'
}


const num = ref(0)
const changeNum = () => {
    return num.value++
}
</script>

<style lang="scss" scoped>
.group {
    border: 2px solid skyblue;
    padding: 10px;
    margin: 10px;
}
</style>